<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div class="set" style="height: 100%;">
        <div class="monthTop">
            日常签到
        </div>
        <div class="monthCen" style="padding-top: 20px;">
            <span style="float: left;line-height: 32px;">选择月份：</span>
            <div class="DatetimeBox" style="margin-left: 0px;">
                <el-date-picker @change="setEndDate" v-model="monthvalue" type="month" placeholder="选择月份" :picker-options="pickerOptions0">
                </el-date-picker>
            </div>
            <!-- <span style="float: left;line-height: 32px;margin: 0 5px;color: #E7744A;">———</span>
            <div class="DatetimeBox">
                <el-date-picker @change="setEndDate1" v-model="value2" type="date" placeholder="选择日期" :picker-options="pickerOptions0">
                </el-date-picker>
            </div> -->
            <div class="staffSearch">
                <span>发送人：</span>
                <input :title="sendRange" v-model="sendRange" type="text" id="rangeInput" placeholder="选择部门，人员" @click='setDirectorClick' />
            </div>
        </div>
        <div class="monthCen">
            <span class="filtrate" @click="exportClick()">导出</span>
            <span class="filtrate" @click="query()">查询</span>
        </div>
        <div class="monthBot">
            <div v-show="dataLists.length > 0" class="fixedTable" id="freezing" style="overflow:auto;width: 715px;height: 100%;" @scroll="freezing">
                <ul class="biaoge" >
                    <li class="bgfirstli">
                        <div style="background: #f0f0f0;"><span>姓名</span></div>
                        <div style="background: #f0f0f0;"><span>部门</span></div>
                        <div style="background: #f0f0f0;"><span>职位</span></div>
                          <div  v-for="(itema,index) in arr" :key="index">
                            <span>{{itema.a}}</span><br>
                            <span>{{itema.b | week}}</span>
                          </div>
                    </li>
                    <div class="clear"></div>
                    <li class="normalli" v-for="(item,ind) in dataLists" :key="ind">
                        <div><span style="z-index:999">{{item.name}}</span></div>
                        <div><span style="z-index:999">{{item.deptName}}</span></div>
                        <div><span style="z-index:999">{{item.position}}</span></div>
                        <div  v-for="(itema,index) in (item.countVOList)" :key="index">
                            <span style="z-index:-1" v-if="itema.count == 0">{{itema.count}}</span>
                            <span v-else @click="signNum(ind,index)" style="z-index:-1;color:#E7744A;cursor: pointer;"  >{{itema.count}}</span>
                        </div>
                    </li>
                    
                    
                </ul>
            </div>
            <div v-show="dataLists.length == 0" class="undata">暂无签到数据</div> 
            
        </div>
        <div class="pagination" v-show="dataLists.length > 0">
            <el-pagination  @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" :current-page.sync="currentPage" small layout="prev, pager, next" :total='total'>
            </el-pagination>
        </div>
        <!--签到详情弹窗-->
        <div class="ModalsBox" v-show="issignDetail">
            <div class="Modals">
                <div class="modaltitle">签到详情</div>
                <div class="detailbox">
                  <div class="modalcontent" v-for="(item,index) in signs" :key="index">
                    <div style="height:50px;line-height:50px;border-bottom: 1px solid #ccc;"><span>{{item.userName}}</span><span style="margin-left: 16px;">{{item.signDate}}</span></div>
                    <div style="margin-bottom: 20px;" >
                        <p class="grayp"><span>{{item.signTime}}</span><span style="margin-left: 12px;">{{item.address}}</span></p>
                        <p class="grayp"><span>备注：</span><span style="margin-left: 15px;">{{item.remark}}</span></p>
                        <ul class="imgul">
                            <li v-for="(item,index) in (item.imgUrls)" :key="index"><img :src="item" alt="" style="width: 56px;height: 56px;"></li>
                        </ul>
                    </div>
                </div>
                </div>
                
                <div class="btnBox"><input type="button" value="关闭" @click="cancle"></div>
            </div>
        </div>
        <!--弹出框选择部门人员组件-->
        <div v-show='ModalsShow' class="ModalsmemBox">
            <div class="Modalsmem">
                <div class="ModalsmemTop">
                    {{selectBranchTitle}}
                </div>
                <div class="ModalsmemCenter">
                    <div class="centerLeft">
                        <div class="centerLeftTop">
                            {{selectBranchTitle}}
                        </div>
                        <div class="centerLeftBot">
                            <div class="centerLeftBotOne">
                                <div v-show="selectBranchTitle == '选择人员' || selectBranchTitle == '选择人员或部门'">
                                    <div class="centerLeftBotOneL">
                                        <img src="/static/img/watchsee.png" alt="">
                                    </div>
                                    <div class="centerLeftBotOneI">
                                        <input type="text" placeholder="搜索" v-model.trim="searchsmemVal">
                                    </div>
                                     <div v-show="searchsmemVal != ''" class="centerLeftBotOneX" @click="clearSearchClick">
										<img src="/static/img/Group.png" alt="">
									</div>
                                </div>
                            </div>
                            <div class="centerLeftBotTwo">
                                <ul>
                                    <li v-for="(item,index) in navLists" :key="index" @click="navClick(index)">
                                        <div v-show="index !== 0">
                                            >
                                        </div>
                                        <div>
                                            {{item.name}}
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="centerLeftBotThr">
                                <div>
                                    <el-checkbox v-model="checkedDesign" @change="numChangeDesign"></el-checkbox>
                                </div>
                                <div>
                                    <span>全选</span>
                                </div>
                            </div>
                            <div class="centerLeftBotFour">
                                <ul>
                                    <li v-for="(item,index) in selectLeftlists" :key="index">
                                        <div class="centerLeftBotFourLiL" @click="lefthandleCheckedCitiesChange(index)">
                                            <div v-show="item.type == 1 && (selectBranchTitle == '选择部门' || selectBranchTitle == '选择人员或部门')">
                                                <img v-show="item.open" src="/static/img/on@2x.png" alt="">
                                                <img v-show="!item.open" src="/static/img/out@2x.png" alt="">
                                            </div>
                                            <div v-show="item.type == 2 && (selectBranchTitle == '选择人员' || selectBranchTitle == '选择人员或部门')">
                                                <img v-show="item.open" src="/static/img/on@2x.png" alt="">
                                                <img v-show="!item.open" src="/static/img/out@2x.png" alt="">
                                            </div>
                                            <div v-show="item.type == 1">
                                                <img src="/static/img/member@2x.png" alt="">
                                            </div>
                                            <div :title="item.name" :class="{grayColor:item.isAuth == 0 || item.isActivite ==0}">
                                                {{item.name}}-{{item.type | typeFun}}
                                            </div>
                                        </div>
                                        <div v-if="item.type == 1" class="centerLeftBotFourLiR" @click="leftNextClick(index)">
                                            <div>
                                                <img src="/static/img/can@2x.png" alt="">
                                            </div>
                                            <div>
                                                下级
                                            </div>
                                        </div>
                                        <div v-else class="centerLeftBotFourLiR">
                                            <!-- <div>
                                                <img src="/static/img/canon@2x.png" alt="">
                                            </div>
                                            <div>
                                                下级
                                            </div> -->
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="centerCenter">
                        <div @click="commodityLeftClick">
                            <img src="/static/img/xright@2x.png" alt="">
                        </div>
                        <div @click="commodityRightClick">
                            <img src="/static/img/xleft@2x.png" alt="">
                        </div>
                    </div>
                    <div class="centerRight">
                        <div class="centerRightTop">
                            {{selectBranchTitleAlready}}
                        </div>
                        <div class="centerRightBot">
                            <ul>
                                <li v-for="(item,index) in selectRightlists" :key="index" @click="righthandleCheckedCitiesChange(index)">
                                    <div class="centerRightBotLiL">
                                        <div>
                                            <img v-show="item.open" src="/static/img/on@2x.png" alt="">
                                            <img v-show="!item.open" src="/static/img/out@2x.png" alt="">
                                        </div>
                                        <div v-show="item.type == 1">
                                            <img src="/static/img/member@2x.png" alt="">
                                        </div>
                                        <div :title="item.name">
                                            {{item.name}}-{{item.type | typeFun}}
                                        </div>
                                    </div>
                                    <div class="centerRightBotLiR">
                                        <div>
                                            <!-- <img src="/static/img/清空@2x.png" alt=""> -->
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="ModalsmemBot">
                    <div @click="confirmClick">
                        确定
                    </div>
                    <div @click="cancelClick">
                        取消
                    </div>
                </div>
            </div>
        </div>
        <!--导出数据提示框-->
        <div class="ModalsBox" v-show="exportDataBox">
            <div class="Modals">
                <div class="modaltitle" style="box-shadow:none">休息一下</div>
                <div class="modalcontent">
                    <p>数据正在被导出，请勿关闭浏览器哦</p>
                    <div class="btnBox" >
                        <input type="button" value="确认" @click='exportDataClick'>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
require("../../../../api/api.js");
import { mapActions } from "vuex";
export default {
  name: "set",
  data() {
    return {
      exportDataBox:false,
      appId:'',
      appIdArr:[],
      monthvalue:'',
      total:0,
      deptIds:'',
      userIds:'',
      currentPage:1,
      signs: [],
      issignDetail: false,
      pickerOptions0: {
        disabledDate(time) {
          // console.log(Date.now() - 8.64e7)
          return Date.now() < time.getTime();
        }
      },
      cityOptions: [0, 1],
      dsa: "",
      items: [],
      checkedCities: [],
      checkAll: false, //全选按钮是否选中
      value1: "", //开始时间
      value2: "",//结束时间
      dataLists: [],
      oid: "",
      uid: "",
      arr:[],
      // 选择人员弹框组件样式
      ModalsShow: false, //弹出框选择部门、人员是否显示
      selectBranchTitle: "选择人员或部门", //弹框标题
      searchsmemVal: "", //弹框搜索input内容
      navLists: [], //弹框内导航数组
      checkedDesign: false, //全选按钮是否选中
      selectLeftlists: [], //左侧选中的数组
      selectBranchTitleAlready: "已选人员", //右侧选中的标题
      selectRightlists: [], //右侧选中的数组
      selectMembersVal_3: [], //给后台传的选中的数据格式
      ischeckedDesignBranch: false, //判断权限，表示是否能全选的标记
      visibleMans: [], //用来展示选中的部门或人员的数组
      sendRange: "" //显示的选中的部门或人员的字符串
    };
  },

  created: function() {
     
    sessionStorage.removeItem("deptIds")
    sessionStorage.removeItem("userIds")
    this.companyName = sessionStorage.getItem("orgName");
    if (sessionStorage.getItem("orgId") == undefined) {
      return;
    }
    // 若此人中途无权限，则跳到登录页
    this.getbusiness({
      oid: sessionStorage.getItem("orgId"),
      uid: sessionStorage.getItem("userId")
    })
      .then(data => {
        if (data.code == "100005") {
          this.$message({
            type: "info",
            message: "对不起，没有权限"
          });
          this.$router.push({
            path: "/login"
          });
        }
      })
      .catch(msg => {
        if (JSON.parse(msg.bodyText).code == "188888") {
          this.$message({
            type: "info",
            message: JSON.parse(msg.bodyText).msg
          });
          this.$router.push({
            path: "/login"
          });
        } else {
          this.$message({
            type: "info",
            message: "服务器错误!"
          });
        }
      });
    this.appIdArr = JSON.parse(sessionStorage.getItem('business')).authList
    for(let i=0;i<this.appIdArr.length;i++){
      if(this.appIdArr[i].authName == '签到'){
        this.appId = this.appIdArr[i].appId
      }
    }
    this.oid = sessionStorage.getItem("orgId");
    this.uid = sessionStorage.getItem("userId");
    this.getsignListFun(0)
    this.Date()
  },
  watch: {
    searchsmemVal: function(val) {
      var self = this;
      self.selectLeftlists = [];
      if (val.length == 0) {
        self.listFun();
      } else {
        // 在公司所有的人员中进行查找
        self
          .getRequestList({
            oid: self.oid,
            uid: self.uid,
            searchKey: val,
            appId:self.appId
          })
          .then(data => {
            if (data.code == "000000") {
              data.data.forEach(function(ele, ind) {
                self.selectLeftlists.push({
                  name: ele.name,
                  open: false,
                  parentId: ele.userId,
                  type: 2,
                  id: ele.userId,
                  isAuth: ele.isAuth,
                  isActivite: ele.isActivite
                });
              });
              // 点击数组更新后，循环遍历与右侧进行对比是否选中
              self.selectLeftlists.forEach(function(eleLeft, eleLeftInd) {
                self.selectRightlists.forEach(function(eleRight, rightInd) {
                  if (eleLeft.id == eleRight.id) {
                    self.selectLeftlists[eleLeftInd].open = true;
                  }
                });
              });
              self.judgeSelectAll();
            } else {
              self.$message({
                type: "info",
                message: data.msg
              });
            }
          })
          .catch(msg => {
            if (JSON.parse(msg.bodyText).code == "188888") {
              this.$message({
                type: "info",
                message: JSON.parse(msg.bodyText).msg
              });
              this.$router.push({
                path: "/login"
              });
            } else {
              this.$message({
                type: "info",
                message: "服务器错误!"
              });
            }
          });
      }
    }
  },
  filters: {
    typeFun: function(val) {
      if (val == 1) {
        return "部门";
      } else {
        return "人员";
      }
    },
    week(val){
      if(val == 0){
        return '日'
      }else if(val == 1){
        return '一'
      }else if(val == 2){
        return '二'
      }else if(val == 3){
        return '三'
      }else if(val == 4){
        return '四'
      }else if(val == 5){
        return '五'
      }else if(val == 6){
        return '六'
      }
    }

  },
  methods: {
    exportDataClick(){
     this.exportDataBox = false
    },
     Date() {
        // alert(new Date('2018-1-22').getDay());
        let self = this
        let months = new Date().getMonth() + 1
        let month = months > 9 ? months : '0' + months
        let day = new Date().getDate()
        let week = new Date().getDay()
        let year = new Date().getFullYear()
        let monthArr = []
        if (year % 4 == 0 && year % 100 != 0) {
                //  如果是闰年
                if(month == '02'){
                  for(let i=1;i<30;i++){
                    monthArr.push(year + '-' + month + '-' + i)
                    self.arr.push({
                      a:i > 9 ? month + '-' + i : month + '-' + '0' + i ,
                      b:new Date(year + '-' + month + '-' + i).getDay(),
                      c:year + '-' + month + '-' + i,
                       current:0
                   })
                  }
                }else if(month == 4 || month == 6 || month == 9 || month == 11){
                  for(let i=1;i<31;i++){
                    monthArr.push(year + '-' + month + '-' + i)
                     self.arr.push({
                      a:i > 9 ? month + '-' + i : month + '-' + '0' + i ,
                      b:new Date(year + '-' + month + '-' + i).getDay(),
                      c:year + '-' + month + '-' + i,
                       current:0
                    })
                  }
                }else{
                  for(let i=1;i<32;i++){
                   monthArr.push(year + '-' + month + '-' + i)
                    self.arr.push({
                      a:i > 9 ? month + '-' + i : month + '-' + '0' + i ,
                      b:new Date(year + '-' + month + '-' + i).getDay(),
                      c:year + '-' + month + '-' + i,
                       current:0
                   })
                  }
                }
            } else {
              if (year % 400 == 0) {
                //  如果是闰年
                if(month == 2){
                  for(let i=1;i<30;i++){
                    monthArr.push(year + '-' + month + '-' + i)
                     self.arr.push({
                      a:i > 9 ? month + '-' + i : month + '-' + '0' + i ,
                      b:new Date(year + '-' + month + '-' + i).getDay(),
                      c:year + '-' + month + '-' + i,
                       current:0
                    })
                  }
                }else if(month == 4 || month == 6 || month == 9 || month == 11){
                  for(let i=1;i<31;i++){
                    monthArr.push(year + '-' + month + '-' + i)
                     self.arr.push({
                      a:i > 9 ? month + '-' + i : month + '-' + '0' + i ,
                      b:new Date(year + '-' + month + '-' + i).getDay(),
                      c:year + '-' + month + '-' + i,
                       current:0
                    })
                  }
                }else{
                  for(let i=1;i<32;i++){
                   monthArr.push(year + '-' + month + '-' + i) 
                    self.arr.push({
                      a:i > 9 ? month + '-' + i : month + '-' + '0' + i ,
                      b:new Date(year + '-' + month + '-' + i).getDay(),
                      c:year + '-' + month + '-' + i,
                       current:0
                    })
                  }
                }
              } else {
                //  如果不是闰年
                if(month == 2){
                  for(let i=1;i<29;i++){
                    monthArr.push(year + '-' + month + '-' + i)
                     self.arr.push({
                      a:i > 9 ? month + '-' + i : month + '-' + '0' + i ,
                      b:new Date(year + '-' + month + '-' + i).getDay(),
                      c:year + '-' + month + '-' + i,
                       current:0
                    })
                  }
                }else if(month == 4 || month == 6 || month == 9 || month == 11){
                  for(let i=1;i<31;i++){
                    monthArr.push(year + '-' + month + '-' + i)
                     self.arr.push({
                      a:i > 9 ? month + '-' + i : month + '-' + '0' + i ,
                      b:new Date(year + '-' + month + '-' + i).getDay(),
                      c:year + '-' + month + '-' + i,
                       current:0
                    })
                  }
                }else{
                  for(let i=1;i<32;i++){
                   monthArr.push(year + '-' + month + '-' + i)
                  self.arr.push({
                      a:i > 9 ? month + '-' + i : month + '-' + '0' + i ,
                      b:new Date(year + '-' + month + '-' + i).getDay(),
                      c:year + '-' + month + '-' + i,
                      current:0
                    })
                  }
                }
              }
            }
    },
    listFun() {
      var self = this;
      self.selectLeftlists = [];
      this.getdeptstaff({
        oid: self.oid,
        uid: self.uid,
        deptId: "",
        appId:self.appId
      })
        .then(data => {
          if (data.code == "000000") {
            self.navLists = [{ name: "通讯录", deptId: "" }];
            self.selectLeftlists.push({
              name: data.data.name,
              open: false,
              parentId: 0,
              type: data.data.type,
              id: data.data.id,
              isAuth: data.data.isAuth,
              isActivite: data.data.isActivite
            });
            if (self.selectRightlists.length > 0) {
              // 点击数组更新后，循环遍历与右侧进行对比是否选中
              self.selectLeftlists.forEach(function(eleLeft, eleLeftInd) {
                self.selectRightlists.forEach(function(eleRight, rightInd) {
                  if (eleLeft.id == eleRight.id) {
                    self.selectLeftlists[eleLeftInd].open = true;
                  }
                });
              });
              self.judgeSelectAll();
            }
          } else if (data.code == "100005") {
            self.$message(data.msg);
            self.$router.push({
              path: "/login"
            });
          } else {
            self.$message(data.msg);
          }
        })
        .catch(msg => {
          if (JSON.parse(msg.bodyText).code == "188888") {
            this.$message({
              type: "info",
              message: JSON.parse(msg.bodyText).msg
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            this.$message({
              type: "info",
              message: "服务器错误!"
            });
          }
        });
    },
    navClick(index) {
      var self = this;
      this.getdeptstaff({
        oid: self.oid,
        uid: self.uid,
        deptId: self.navLists[index].deptId,
        appId:self.appId
      })
        .then(data => {
          if (data.code == "000000") {
            self.selectLeftlists = [];
            var start = index + 1;
            self.navLists.splice(index + 1, self.navLists.length - start);
            // 如果是公司走这里
            if (self.navLists[index].deptId == "") {
              self.selectLeftlists.push({
                name: data.data.name,
                open: false,
                parentId: 0,
                type: data.data.type,
                id: data.data.id,
                isAuth: data.data.isAuth,
                isActivite: data.data.isActivite
              });
            } else {
              data.data.forEach(function(ele, ind) {
                self.selectLeftlists.push({
                  name: ele.name,
                  open: false,
                  parentId: ele.parentId,
                  type: ele.type,
                  id: ele.id,
                  isAuth: ele.isAuth,
                  isActivite: ele.isActivite
                });
              });
            }
            // 点击数组更新后，循环遍历与右侧进行对比是否选中
            self.selectLeftlists.forEach(function(eleLeft, eleLeftInd) {
              self.selectRightlists.forEach(function(eleRight, rightInd) {
                if (eleLeft.id == eleRight.id) {
                  self.selectLeftlists[eleLeftInd].open = true;
                }
              });
            });
            self.judgeSelectAll();
          } else if (data.code == "100005") {
            self.$message(data.msg);
            self.$router.push({
              path: "/login"
            });
          } else {
            self.$message(data.msg);
          }
        })
        .catch(msg => {
          if (JSON.parse(msg.bodyText).code == "188888") {
            this.$message({
              type: "info",
              message: JSON.parse(msg.bodyText).msg
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            this.$message({
              type: "info",
              message: "服务器错误!"
            });
          }
        });
    },
    // 下一级
    leftNextClick(index) {
      var self = this;
      this.getdeptstaff({
        oid: self.oid,
        uid: self.uid,
        deptId: self.selectLeftlists[index].id,
        appId:self.appId
      })
        .then(data => {
          if (data.code == "000000") {
            self.navLists.push({
              name: self.selectLeftlists[index].name,
              deptId: self.selectLeftlists[index].id
            });
            self.selectLeftlists = [];
            data.data.forEach(function(ele, ind) {
              self.selectLeftlists.push({
                name: ele.name,
                open: false,
                parentId: ele.parentId,
                type: ele.type,
                id: ele.id,
                isAuth: ele.isAuth,
                isActivite: ele.isActivite
              });
            });
            self.selectLeftlists.forEach(function(eleLeft, eleLeftInd) {
              self.selectRightlists.forEach(function(eleRight, rightInd) {
                if (eleLeft.id == eleRight.id) {
                  self.selectLeftlists[eleLeftInd].open = true;
                }
              });
            });
            self.judgeSelectAll();
          } else if (data.code == "100005") {
            self.$message(data.msg);
            self.$router.push({
              path: "/login"
            });
          } else {
            self.$message(data.msg);
          }
        })
        .catch(msg => {
          if (JSON.parse(msg.bodyText).code == "188888") {
            this.$message({
              type: "info",
              message: JSON.parse(msg.bodyText).msg
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            this.$message({
              type: "info",
              message: "服务器错误!"
            });
          }
        });
    },
    // 取消选中商品
    righthandleCheckedCitiesChange(index) {
      var self = this;
      this.selectRightlists[index].open = !this.selectRightlists[index].open;
    },
    // 点击向左移动按钮
    commodityRightClick() {
      var self = this;
      var rights = [];
      var seRight = [];
      self.selectRightlists.forEach(function(ele, ind) {
        if (ele.open == false) {
          rights.push({
            name: ele.name,
            open: false,
            parentId: ele.parentId,
            type: ele.type,
            id: ele.id
          });
        } else {
          seRight.push({
            name: ele.name,
            open: false,
            parentId: ele.parentId,
            type: ele.type,
            id: ele.id
          });
        }
      });
      self.selectRightlists = rights;
      this.selectLeftlists.forEach(function(eleL, indL) {
        seRight.forEach(function(ele, ind) {
          if (eleL.id === ele.id) {
            self.selectLeftlists[indL].open = false;
          }
        });
      });
      this.selectLeftlists.forEach(function(eleL, indL) {
        rights.forEach(function(ele, ind) {
          if (eleL.id === ele.id) {
            self.selectLeftlists[indL].open = true;
          }
        });
      });
      this.judgeSelectAll();
    },
    // 判断是否全选
    judgeSelectAll() {
      var rArrs = [];
      this.selectLeftlists.forEach(function(ele, ind) {
        if (ele.open == true) {
          rArrs.push({
            clickNode: ele.clickNode,
            name: ele.name,
            open: false,
            parentId: ele.parentId,
            type: ele.type,
            id: ele.id,
            isAuth: ele.isAuth,
            isActivite: ele.isActivite
          });
        }
      });
      var hash = {};
      rArrs = rArrs.reduce(function(item, next) {
        hash[next.id] ? "" : (hash[next.id] = true && item.push(next));
        return item;
      }, []);
      if (rArrs.length == this.selectLeftlists.length && rArrs.length !== 0) {
        this.checkedDesign = true;
      } else {
        this.checkedDesign = false;
      }
    },
    // 添加选中商品
    lefthandleCheckedCitiesChange(index) {
      var self = this;
      if (this.selectBranchTitle == "选择人员或部门") {
        if (
          self.selectLeftlists[index].isAuth == 0 &&
          self.selectLeftlists[index].type == 1
        ) {
          //   this.selectLeftlists[index].open = this.selectLeftlists[index].open;
        } else if (
          self.selectLeftlists[index].isActivite == 0 &&
          self.selectLeftlists[index].type == 2
        ) {
          // 不做任何操作
        } else {
          this.selectLeftlists[index].open = !this.selectLeftlists[index].open;
        }
      }
      this.judgeSelectAll();
    },
    // 点击向右移动
    commodityLeftClick() {
      var self = this;
      var rArrs = [];
      this.selectLeftlists.forEach(function(ele, ind) {
        if (ele.open == true) {
          self.selectRightlists.push({
            clickNode: ele.clickNode,
            name: ele.name,
            open: false,
            parentId: ele.parentId,
            type: ele.type,
            id: ele.id,
            isAuth: ele.isAuth,
            isActivite: ele.isActivite
          });
        }
      });
      var hash = {};
      self.selectRightlists = self.selectRightlists.reduce(function(
        item,
        next
      ) {
        hash[next.id] ? "" : (hash[next.id] = true && item.push(next));
        return item;
      },
      []);
    },
    // 所有序号被选中时
    numChangeDesign(event) {
      var self = this;
      self.ischeckedDesignBranch = false;
      self.selectLeftlists.forEach(function(ele, ind) {
        if (
          (ele.isAuth == 0 && ele.type == 1) ||
          (ele.isActivite == 0 && ele.type == 2)
        ) {
          self.ischeckedDesignBranch = true;
        }
      });
      if (self.ischeckedDesignBranch == true) {
        self.checkedDesign = false;
        self.$message("不能选择没有权限的部门或未激活的人员！");
      } else {
        if (event.target.checked) {
          this.selectLeftlists.forEach(function(ele, ind) {
            ele.open = true;
          });
        } else {
          this.selectLeftlists.forEach(function(ele, ind) {
            ele.open = false;
          });
        }
      }
    },
    //选择成员弹出框确认
    confirmClick() {
      var arr = this.selectRightlists.map(function(data) {
        return { adminName: data.name, adminId: data.id, type: data.type };
      });
      this.ModalsShow = false;
      this.visibleMans = [];
      for (var i = 0; i < arr.length; i++) {
        this.visibleMans.push(arr[i]);
      }
      this.sendRange = this.visibleMans
        .map(function(data) {
          return data.adminName;
        })
        .join(",");
      this.selectMembersVal_3 = this.visibleMans.map(function(data) {
        return { id: data.adminId, type: data.type };
      });
      let deptIdArr = []
      let userIdArr = []
      for(i=0;i<this.selectMembersVal_3.length;i++){
        if(this.selectMembersVal_3[i].type == 1){
           deptIdArr.push(this.selectMembersVal_3[i].id)
           self.deptIds = deptIdArr.join(',') 
           sessionStorage.setItem('deptIds',self.deptIds)
        }else{
          userIdArr.push(this.selectMembersVal_3[i].id)
          self.userIds = userIdArr.join(',')
          sessionStorage.setItem("userIds",self.userIds)
        }
      }
    },
    // 选择成员弹出框取消
    cancelClick() {
      this.ModalsShow = false;
    },
    // 点击设置发送人
    setDirectorClick(m) {
      var self = this;
      self.listFun();
      document.getElementById("rangeInput").blur();
      self.searchsmemVal = "";
      this.ModalsShow = true;
      this.selectRightlists = [];
      this.selectBranchTitle = "选择人员或部门";
      this.selectBranchTitleAlready = "已选人员或部门";
      if (this.visibleMans.length > 0) {
        this.visibleMans.forEach(function(ele, index) {
          self.selectRightlists.push({
            name: ele.adminName,
            id: ele.adminId,
            open: false,
            type: ele.type
          });
        });
        self.selectLeftlists.forEach(function(ele, index) {
          ele.open = false;
        });
        self.selectLeftlists.forEach(function(eleLeft, eleLeftInd) {
          self.selectRightlists.forEach(function(eleRight, rightInd) {
            if (eleLeft.id == eleRight.id) {
              self.selectLeftlists[eleLeftInd].open = true;
            }
          });
        });
        this.judgeSelectAll();
      } else {
        this.selectRightlists = [];
        self.selectLeftlists.forEach(function(ele, index) {
          ele.open = false;
        });
      }
      this.judgeSelectAll();
    },
    // 清空搜索input内容
    clearSearchClick() {
      this.searchsmemVal = "";
    },
    setEndDate(val){
      if(this.monthvalue !== ''){
      this.monthvalue=val;
      let year = this.monthvalue.split('-')[0]
      let month = this.monthvalue.split('-')[1]
      if (year % 4 == 0 && year % 100 != 0) {
                //  如果是闰年
                if(month == '02'){
                this.value1 = this.monthvalue + '-' + "01"
                this.value2 = this.monthvalue + '-' + '29'
                }else if(month == '04' || month == '06' || month == '09' || month == '11'){
                this.value1 = this.monthvalue + '-' + "01"
                this.value2 = this.monthvalue + '-' + '30' 
                }else{
                this.value1 = this.monthvalue + '-' + "01"
                this.value2 = this.monthvalue + '-' + '31'
                }
            } else {
              if (year % 400 == 0) {
                //  如果是闰年
              if(month == '02'){
                this.value1 = this.monthvalue + '-' + "01"
                this.value2 = this.monthvalue + '-' + '29'
                }else if(month == '04' || month == '06' || month == '09' || month == '11'){
                this.value1 = this.monthvalue + '-' + "01"
                this.value2 = this.monthvalue + '-' + '30' 
                }else{
                this.value1 = this.monthvalue + '-' + "01"
                this.value2 = this.monthvalue + '-' + '31'
                }             
              } else {
                //  如果不是闰年
               if(month == '02'){
                this.value1 = this.monthvalue + '-' + "01"
                this.value2 = this.monthvalue + '-' + '28'
                }else if(month == '04' || month == '06' || month == '09' || month == '11'){
                this.value1 = this.monthvalue + '-' + "01"
                this.value2 = this.monthvalue + '-' + '30' 
                }else{
                this.value1 = this.monthvalue + '-' + "01"
                this.value2 = this.monthvalue + '-' + '31'
                } 
              }
            } 
      }else{
        this.value1 = ''
        this.value2 = ''
      }
    },
    setEndDate1(val){
      this.value2=val;
    },
    // 获取签到列表
    getsignListFun(m) {
      var self = this;
     if(m == 0){
       self.currentPage = 1
     }
      if(self.sendRange == ''){
      self
        .getSignGet({
          oid:self.oid,
          startTime:self.value1,
          endTime:self.value2,
          deptId:'',
          uid:'',
          pageNo:self.currentPage,
          pageSize:10
        })
        .then(data => {
          if (data.code == "000000") {
             self.dataLists = data.data.records
             self.total = data.data.total
             
          } else {
            self.$message(data.msg);
          }
        })
        .catch(msg => {
          if (JSON.parse(msg.bodyText).code == "188888") {
            this.$message({
              type: "info",
              message: JSON.parse(msg.bodyText).msg
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            this.$message({
              type: "info",
              message: "服务器错误!"
            });
          }
        });
      }else{
      self
        .getSignGet({
          oid:self.oid,
          startTime:self.value1,
          endTime:self.value2,
          deptId:sessionStorage.getItem("deptIds"),
          uid:sessionStorage.getItem("userIds"),
          pageNo:self.currentPage,
          pageSize:10
        })
        .then(data => {
          if (data.code == "000000") {
             self.dataLists = data.data.records
             self.total = data.data.total
            
          } else {
            self.$message(data.msg);
          }
        })
        .catch(msg => {
          if (JSON.parse(msg.bodyText).code == "188888") {
            this.$message({
              type: "info",
              message: JSON.parse(msg.bodyText).msg
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            this.$message({
              type: "info",
              message: "服务器错误!"
            });
          }
        });
      }

    },
    // 点击导出按钮
    exportClick() {
     let self = this 
     self.exportDataBox = true
      let a
      let b
      if(self.logTypeVal == '0'){
        self.logTypeVal = ''
      }
      if(sessionStorage.getItem("deptIds") == null){
         a = ''
      }else{
        a = sessionStorage.getItem("deptIds")
      }
      if(sessionStorage.getItem("userIds") == null){
        b = ''
      }else{
        b = sessionStorage.getItem("userIds")
      }
      window.location.href =
        global.datasIp +
        "/api-sign/sign/export" 
        +'?oid=' + sessionStorage.getItem('orgId') + '&startTime=' + self.value1
        + '&endTime=' + self.value2 + '&uid=' +  b
        + '&deptId=' + a + '&access_token=' + sessionStorage.getItem('accessToken')
    },
    // 点击签到的次数
    signNum(ind,index) {
      let self = this
      let uid = self.dataLists[ind].userId
      let day = self.dataLists[ind].countVOList[index].time
      self.getSignDetail({
        oid:sessionStorage.getItem('orgId'),
        uid:uid,
        day:day
      }).then((data)=>{
         if(data.code == '000000'){
            if(data.data.length == 0){
            this.$message({
             type:'info',
             message:'暂无签到详情！'
           }) 
            }else{
               this.issignDetail = true;
               self.signs = data.data
            }
         }else{
           this.$message({
             type:'info',
             message:data.msg
           })
         }
      }).catch(msg=>{
        this.$message({
          type:'info',
          message:msg.statusText
        })
      })
    },
    cancle() {
      this.issignDetail = false;
    },
    query() {
      let self = this
      self.arr = []
        if(this.monthvalue !== ''){
          let year = this.monthvalue.split('-')[0]
          let month = this.monthvalue.split('-')[1]
          if (year % 4 == 0 && year % 100 != 0) {
                //  如果是闰年
                if(month == '02'){
                 for(let i=1;i<30;i++){
                    self.arr.push({
                      a:i > 9 ? month + '-' + i : month + '-' + '0' + i ,
                      b:new Date(year + '-' + month + '-' + i).getDay(),
                      c:year + '-' + month + '-' + i,
                       current:0
                   })
                  } 
                }else if(month == '04' || month == '06' || month == '09' || month == '11'){
                  for(let i=1;i<31;i++){
                    self.arr.push({
                      a:i > 9 ? month + '-' + i : month + '-' + '0' + i ,
                      b:new Date(year + '-' + month + '-' + i).getDay(),
                      c:year + '-' + month + '-' + i,
                       current:0
                   })
                  }
                }else{
                for(let i=1;i<32;i++){
                    self.arr.push({
                      a:i > 9 ? month + '-' + i : month + '-' + '0' + i ,
                      b:new Date(year + '-' + month + '-' + i).getDay(),
                      c:year + '-' + month + '-' + i,
                       current:0
                   })
                  }
                }
            } else {
              if (year % 400 == 0) {
                //  如果是闰年
              if(month == '02'){
                for(let i=1;i<30;i++){
                    self.arr.push({
                      a:i > 9 ? month + '-' + i : month + '-' + '0' + i ,
                      b:new Date(year + '-' + month + '-' + i).getDay(),
                      c:year + '-' + month + '-' + i,
                       current:0
                   })
                  }
                }else if(month == '04' || month == '06' || month == '09' || month == '11'){
                for(let i=1;i<31;i++){
                    self.arr.push({
                      a:i > 9 ? month + '-' + i : month + '-' + '0' + i ,
                      b:new Date(year + '-' + month + '-' + i).getDay(),
                      c:year + '-' + month + '-' + i,
                       current:0
                   })
                  }
                }else{
               for(let i=1;i<32;i++){
                    self.arr.push({
                      a:i > 9 ? month + '-' + i : month + '-' + '0' + i ,
                      b:new Date(year + '-' + month + '-' + i).getDay(),
                      c:year + '-' + month + '-' + i,
                       current:0
                   })
                  }
                }             
              } else {
                //  如果不是闰年
               if(month == '02'){
                for(let i=1;i<29;i++){
                    self.arr.push({
                      a:i > 9 ? month + '-' + i : month + '-' + '0' + i ,
                      b:new Date(year + '-' + month + '-' + i).getDay(),
                      c:year + '-' + month + '-' + i,
                       current:0
                   })
                  }
                }else if(month == '04' || month == '06' || month == '09' || month == '11'){
                for(let i=1;i<31;i++){
                    self.arr.push({
                      a:i > 9 ? month + '-' + i : month + '-' + '0' + i ,
                      b:new Date(year + '-' + month + '-' + i).getDay(),
                      c:year + '-' + month + '-' + i,
                       current:0
                   })
                  } 
                }else{
                for(let i=1;i<32;i++){
                    self.arr.push({
                      a:i > 9 ? month + '-' + i : month + '-' + '0' + i ,
                      b:new Date(year + '-' + month + '-' + i).getDay(),
                      c:year + '-' + month + '-' + i,
                       current:0
                   })
                  }
                } 
              }
            } 
        }else{
          this.Date()
        }
        this.currentPage = 1
        this.getsignListFun(0) 
    },
    // 比较时间是否大于一个月
    getD(sDate, endDate) {
    var sDate = new Date(sDate);
    var eDate = new Date(endDate);
 
    if (eDate.getFullYear() - sDate.getFullYear() > 1) {//先比较年
        return true;
    } else if (eDate.getMonth() - sDate.getMonth() > 1) {//再比较月
        return true;
    } else if (eDate.getMonth() - sDate.getMonth() == 1) {
        if (eDate.getDate() - sDate.getDate() >= 1) {
            return true;
        }
    }
    return false;
    },
    // 分页
    handleSizeChange(val) {
      //   this.pageSizeNum = val;
      //   this.getnoticeListFun();
    },
    handleCurrentChange(val) {
      this.currentPage = val
      let free = document.getElementById('freezing') 
      free.scrollLeft = 0
      this.getsignListFun(1);
    },
    freezing() {
      $("#freezing .biaoge li>div:first-child").css(
        "left",
        $("#freezing").scrollLeft()
      );
      $("#freezing .biaoge li>div:nth-child(2)").css(
        "left",
        $("#freezing").scrollLeft()
      );
      $("#freezing .biaoge li>div:nth-child(3)").css(
        "left",
        $("#freezing").scrollLeft()
      );
      $("#freezing .bgfirstli").css("top", $("#freezing").scrollTop());
    },
    ...mapActions(["getbusiness", "getdeptstaff", "getRequestList",'getaaaaaaaa','getSignGet','getSignDetail'])
  }
};
</script>
<style scoped>
/*弹窗*/
.detailbox{
  overflow-y: scroll;
  height: 450px;
}
.Modals {
  width: 330px;
  height: 581px;
  background: #fff;
}

.modaltitle {
  height: 64px;
  line-height: 64px;
  font-size: 16px;
  text-align: center;
  box-shadow: 0 2px 5px #ccc;
}

.modalcontent {
  padding: 0 44px;
}

.grayp {
  margin: 5px 0;
  color: #a1a0a5;
}

.imgul li {
  display: inline-block;
  margin-right: 12px;
  margin-top: 5px;
}
.modalcontent {
  height: auto;
  overflow-y: hidden;
}
.btnBox {
    position: absolute;
    text-align: center;
    margin-top: 16px;
    left: 38%;
    bottom: 20px;
}
.btnBox input {
  width: 80px;
  height: 34px;
  line-height: 34px;
  background: #e7744a;
  font-size: 16px;
  color: #fff;
}
/*表格*/

.biaoge {
  min-width: 715px;
}

.biaoge > li {
  height: 28px;
}

.biaoge > li > div {
  min-width: 59px;
  border-right: 1px solid #e5e5e5;
  position: relative;
  vertical-align: middle;
  display: table-cell;
  text-align: center;
  word-wrap: break-word;
  word-break: break-all;
  border-bottom: 1px solid #e5e5e5;
  height: 46px;
}

.biaoge li > div:nth-child(2),
.biaoge li > div:nth-child(3) {
  min-width: 94px;
  z-index: 66;
}

.normalli,
.bgfirstli {
  display: table;
}

.normalli div:nth-child(2),
.normalli div:nth-child(3) {
  background: #fff;
}

.normalli div {
  height: 50px;
  padding: 2px;
}

.biaoge li > div:nth-child(1) {
  background: white;
  z-index: 3;
  min-width: 94px;
}

.bgfirstli {
  z-index: 88;
  position: relative;
  background: #f0f0f0 !important;
}

.bgfirstli > div {
  height: 59px;
}

.bgfirstli > div span {
  line-height: 26px;
}

#freezing {
  border: solid 1px #e5e5e5;
  box-sizing:border-box;
}

.zhoumo {
  color: #fcb298;
  font-size: 14px;
}

.xiujia {
  color: #fcb298;
  font-size: 12px;
}

.DatetimeBox {
  float: left;
  width: 120px !important;
  height: 32px;
  overflow: hidden;
  position: relative;
  border: 1px solid #e7744a;
  border-radius: 4px;
}

.DatetimeBox .el-date-editor.el-date-editor {
  width: 123px;
  margin-left: -2px;
  margin-top: -3px;
}

.pagination {
  float: right;
  margin-right: 20px;
}

.monthTop {
  width: calc(100%-88px);
  height: auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-left: 44px;
  margin-right: 44px;
  padding-top: 20px;
  padding-bottom: 12px;
  color: #303030;
  font-size: 14px;
}

.monthCen {
  width: calc(100%-88px);
  height: auto;
  margin-left: 44px;
  margin-right: 44px;
  padding-bottom: 26px;
  color: #303030;
  font-size: 14px;
  overflow: hidden;
}

.staffSearch {
  display: inline-block;
  width: auto;
  margin-left: 80px;
  margin-top: 0;
}

.staffSearch input {
  border: 1px solid #e7744a;
  width: 200px;
  height: 32px;
  padding-left: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filtrate {
  float: right;
  width: 96px;
  height: 27px;
  border: 1px solid #e7744a;
  border-radius: 4px;
  color: #e7744a;
  text-align: center;
  line-height: 27px;
  font-size: 14px;
  cursor: pointer;
  margin-left: 26px;
}

.monthBot {
  width: calc(100%-88px);
  height: auto;
  margin-left: 44px;
  margin-right: 44px;
  
}
.fixedTable {
  width: calc(100%-88px);
}
/***********************************弹出组件***************************/
/*成员弹出*/

.centerCenter > div {
  width: 30px;
  height: 30px;
  background-color: #fff;
  color: #000;
  margin-top: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.centerCenter {
  width: 50px;
  height: 100%;
  margin-left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.centerRightBotLiR {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 15px;
}

.centerRightBotLiL > div:nth-child(1) img {
  width: 100%;
  height: 100%;
}

.centerRightBotLiL > div:nth-child(1) {
  width: 17px;
  height: 17px;
  border-radius: 3px;
  border: 1px solid #ececec;
  margin-right: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.centerRightBotLiL > div:nth-child(2) img {
  width: 100%;
  height: 100%;
}

.centerRightBotLiL > div:nth-child(2) {
  width: 17px;
  height: 17px;
  border-radius: 3px;
  border: 1px solid #ececec;
  margin-right: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.centerRightBotLiL > div:nth-child(3) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 250px;
}

.centerRightBotLiL {
  display: flex;
  align-items: center;
  justify-content: center;
}

.centerRightBot {
  height: 235px;
  margin-top: 5px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.centerRightBot ul li:hover {
  background-color: #f6f6f6;
}

.centerRightBot ul li:nth-child(1) {
  margin-top: 20px;
}

.centerRightBot ul li {
  display: flex;
  align-items: center;
  height: 27px;
  width: 100%;
  cursor: pointer;
  padding-left: 15px;
  justify-content: space-between;
}

.centerRightBot {
  height: 365px;
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid #fff;
}

.centerLeftBotFourLiR {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 15px;
  color: #e7744a;
}

.centerLeftBotFourLiL > div:nth-child(3) {
  width: 17px;
  height: 17px;
  margin-right: 7px;
  margin-top: -6px;
}
.centerLeftBotFourLiL > div:nth-child(3) img {
  width: 100%;
  height: 100%;
}
.centerLeftBotFourLiL > div:nth-child(4) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 250px;
}
.centerLeftBotFourLiL > div:nth-child(1) img,
.centerLeftBotFourLiL > div:nth-child(2) img {
  width: 100%;
  height: 100%;
}

.centerLeftBotFourLiL > div:nth-child(1),
.centerLeftBotFourLiL > div:nth-child(2) {
  width: 17px;
  height: 17px;
  border-radius: 3px;
  border: 1px solid #ececec;
  margin-right: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.centerLeftBotFourLiL {
  display: flex;
  align-items: center;
  justify-content: center;
}

.centerLeftBotFour {
  height: 235px;
  margin-top: 5px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.centerLeftBotFour ul li:hover {
  background-color: #f6f6f6;
}

.centerLeftBotFour ul li {
  display: flex;
  align-items: center;
  height: 27px;
  width: 100%;
  cursor: pointer;
  padding-left: 15px;
  justify-content: space-between;
}

.centerLeftBotThr {
  height: 25px;
  margin-top: 5px;
  display: flex;
  align-items: center;
}

.centerLeftBotThr > div:nth-child(1) {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 15px;
  margin-top: 5px;
}

.centerLeftBotThr > div:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
}

.centerLeftBotOne {
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.centerLeftBotOneL {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.centerLeftBotOneI input {
  height: 30px;
  border: none;
  line-height: 30px;
  vertical-align: baseline;
}

.centerLeftBotOneI {
  width: 310px;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
  color: #000;
}

.centerLeftBotOne > div {
  width: 370px;
  height: 32px;
  border-radius: 3px;
  border: 1px solid #d1c4b9;
  display: flex;
  align-items: center;
}

.centerLeftBotTwo ul li > div:nth-child(2) {
  color: #e7744a;
  margin-right: 5px;
  margin-left: 5px;
  cursor: pointer;
}

.centerLeftBotTwo ul li:nth-child(1) > div:nth-child(2) {
  margin-left: 0px;
}

.centerLeftBotTwo ul {
  margin-left: 15px;
}

.centerLeftBotTwo ul li {
  float: left;
  display: flex;
}

.centerLeftBotTwo {
  min-height: 20px;
}

.centerLeftBot > div {
  width: 100%;
}

.centerLeftBot {
  height: 365px;
  border-radius: 5px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #fff;
}

.centerLeftTop,
.centerRightTop {
  height: 45px;
  background-color: #f4f4f5;
  line-height: 55px;
  font-size: 16px;
  color: #000;
  padding-left: 5px;
}

.centerLeft {
  width: 400px;
  height: 410px;
  margin-left: 30px;
}

.centerRight {
  width: 400px;
  height: 410px;
  margin-left: 20px;
}

.ModalsmemTop {
  width: 100%;
  height: 66px;
  background-color: #fff;
  text-align: center;
  font-size: 16px;
  color: #303030;
  line-height: 66px;
}

.ModalsmemCenter {
  width: 100%;
  height: 410px;
  background-color: #f4f4f5;
  display: flex;
}

.ModalsmemBot {
  width: 100%;
  height: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f4f4f5;
}

.ModalsmemBot > div {
  width: 80px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.ModalsmemBot > div:nth-child(1) {
  background-color: #e7744a;
  margin-right: 22px;
}

.ModalsmemBot > div:nth-child(2) {
  background-color: #aeaeae;
  margin-left: 22px;
}

.Modalsmem {
  width: 960px;
  height: 560px;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.5);
  animation: madalsBox 0.8s;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  border-radius: 4px;
}

@keyframes madalsBox {
  from {
    transform: translateY(-200px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.ModalsmemBox {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  z-index: 9999;
}
.centerLeftBotOneX img {
  cursor: pointer;
}
.grayColor {
  color: #ccc;
}
.undata{
  /* width: 100%;
  text-align: center;
  color: #303030;
  margin-top: 120px;
  font-size: 20px; */
      color: #ccc;
    text-align: center;
    margin: 50px;
}
/*弹窗*/

.Modals {
  background: #fff;
  height: 200px;
  width: 324px;
}

.modaltitle {
  height: 34px;
  line-height: 64px;
  text-align: center;
  color: #303030;
  font-size: 16px;
  background: #ffffff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.modalcontent p {
  text-align: center;
  margin-top: 52px;
  margin-bottom: 48px;
}

.btnBox {
  text-align: center;
  margin-top: -10px;
}

.btnBox input {
  width: 80px;
  height: 34px;
  line-height: 34px;
  font-size: 16px;
  color: #fff;
  background: #ffffff;
}

.btnBox input:nth-child(1) {
  margin-right: 30px;
    border: solid 1px #e97449;
    color: #e97449;
}

.btnBox input:nth-child(2) {
      margin-left: 30px;
    border: solid 1px #afafaf;
    color: #afafaf;
}
/* **********************弹出组件样式结束*************** */
</style>